<template>
  <div :class="{'ly-is-full':isFull}">
    <div class="tableSelect" ref="tableSelect">
      <el-form :inline="true" :model="formInline" label-position="left">
        <el-form-item label="分析名称：">
          <el-input size="default" v-model.trim="formInline.name" maxlength="60" clearable
                    @change="search" style="width:200px"></el-input>
        </el-form-item>
<!--        <el-form-item label="股票代码：">-->
<!--          <el-input size="default" v-model.trim="formInline.symbol" maxlength="60" clearable-->
<!--                    @change="search" style="width:200px"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="股票名称：">-->
<!--          <el-input size="default" v-model.trim="formInline.name" maxlength="60" clearable-->
<!--                    @change="search" style="width:200px"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="股票全称：">-->
<!--          <el-input size="default" v-model.trim="formInline.fullname" maxlength="60" clearable-->
<!--                    @change="search" style="width:200px"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="交易时间：">-->
<!--          <el-date-picker-->
<!--              style="width:350px"-->
<!--              v-model="timers"-->
<!--              type="datetimerange"-->
<!--              @change="timeChange"-->
<!--              range-separator="至"-->
<!--              start-placeholder="开始日期"-->
<!--              end-placeholder="结束日期">-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
        <el-form-item label="">
          <!--          <el-button @click="search" type="primary" icon="Search" v-show="isShowBtn('industryClassification','行业分类','Search')">-->
          <el-button @click="search" type="primary" icon="Search" v-show="isShowBtn('userManage','用户管理','Search')">
            查询
          </el-button>
        </el-form-item>
        <el-form-item label="">
          <el-button @click="handleEdit('','reset')" icon="Refresh">重置</el-button>
        </el-form-item>
        <el-form-item label="">
          <el-button @click="addHuiCeFenXi" type="primary" icon="Plus"
                     v-show="isShowBtn('userManage','用户管理','Create')">
            新增
          </el-button>
        </el-form-item>
        <!--        <el-form-item label="">-->
        <!--          <el-button @click="exportDataBackend" type="primary">导入</el-button>-->
        <!--          <el-upload-->
        <!--              :show-file-list="false"-->
        <!--              :http-request="imgUploadRequest"-->
        <!--              :on-success="imgUploadSuccess"-->
        <!--              :before-upload="beforeUpload">-->
        <!--          </el-upload>-->
        <!--        </el-form-item>-->
      </el-form>
    </div>

    <div class="table">
      <el-table :height="'calc('+(tableHeight)+'px)'" border :data="tableData" ref="tableref" v-loading="loadingPage"
                style="width: 100%">
        <el-table-column type="index" width="60" align="center" label="序号">
          <template #default="scope">
            <span v-text="getIndex(scope.$index)"></span>
          </template>
        </el-table-column>
        <el-table-column min-width="70" prop="name" label="分析名"></el-table-column>
        <el-table-column min-width="110" prop="gongshi" label="公式"></el-table-column>
        <el-table-column min-width="100" prop="jisuanzhouqi" label="计算周期"></el-table-column>
        <el-table-column min-width="100" prop="pingceshijianduankaishi" label="评测时间段-开始"></el-table-column>
        <el-table-column min-width="100" prop="pingceshijianduanjieshu" label="评测时间段-结束"></el-table-column>
        <el-table-column min-width="100" prop="danpinzhongchushifenpeizijin"
                         label="单品种初始分配资金"></el-table-column>
        <el-table-column min-width="100" prop="zuidasunshizhisun" label="最大损失止损"></el-table-column>
        <el-table-column min-width="100" prop="zuidashouyizhiying" label="最大收益止赢"></el-table-column>
        <el-table-column min-width="150" prop="create_datetime" label="创建时间"></el-table-column>
        <el-table-column label="操作" fixed="right" width="180">
          <template #header>
            <div style="display: flex;justify-content: space-between;align-items: center;">
              <div>操作</div>
              <div @click="setFull">
                <el-tooltip content="全屏" placement="bottom">
                  <el-icon>
                    <full-screen/>
                  </el-icon>
                </el-tooltip>
              </div>
            </div>
          </template>
          <template #default="scope">
<!--            <span class="table-operate-btn" @click="handleEdit(scope.row,'edit')"-->
<!--                  v-show="isShowBtn('userManage','用户管理','Update')">编辑</span>-->
            <span class="table-operate-btn" @click="handleEdit(scope.row,'detail')"
                  v-show="isShowBtn('userManage','用户管理','Retrieve')">数据详情</span>
            <span class="table-operate-btn" @click="handleEdit(scope.row,'delete')"
                  v-show="isShowBtn('userManage','用户管理','Delete')">删除</span>
            <!--            <span class="table-operate-btn" @click="handleEdit(scope.row,'disable')"-->
            <!--                  v-show="isShowBtn('userManage','用户管理','Update')">-->
            <!--                            <span v-if="scope.row.is_active">禁用</span>-->
            <!--                            <span v-else>启用</span>-->
            <!--                        </span>-->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <add-hui-ce-fen-xi ref="addHuiCeFenXiFlag" @refreshData="getData"></add-hui-ce-fen-xi>
    <huicefenxi-data ref="userDetailFlag"></huicefenxi-data>
  </div>
</template>
<script>
import addHuiCeFenXi from "./components/addHuiCeFenXi";
import Pagination from "@/components/Pagination";
import {dateFormats, getTableHeight} from "@/utils/util";
import {
  platformsettingsUploadPlatformImg,
  UsersUsersdisableEdit,
  UsersUsersExportexecl,
  删除回测分析,
  回测分析列表
} from '@/api/api'
import HuicefenxiData from "./components/huicefenxiData";

export default {
  components: {
    HuicefenxiData,
    Pagination,
    addHuiCeFenXi,
  },
  name: 'userManage',
  data() {
    return {
      isFull: false,
      tableHeight: 500,
      loadingPage: false,
      formInline: {
        page: 1,
        limit: 10,
      },
      defaultImg: require('../../assets/img/avatar.jpg'),
      pageparm: {
        page: 1,
        limit: 10,
        total: 0
      },
      statusList: [
        {id: 1, name: '正常'},
        {id: 0, name: '禁用'}
      ],
      identityList: [
        {id: 0, name: '普通用户'},
        {id: 1, name: '会员'},
      ],
      timers: [],
      tableData: [],
      upload_file: undefined,
    }
  },

  methods: {
    // 表格序列号
    getIndex($index) {
      // (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1
      return (this.pageparm.page - 1) * this.pageparm.limit + $index + 1
    },
    setFull() {
      this.isFull = !this.isFull
      window.dispatchEvent(new Event('resize'))
    },
    changeStatus(row) {
      // console.log(row,'row----')
    },
    addHuiCeFenXi() {
      this.$refs.addHuiCeFenXiFlag.addHuiCeFenXiFlagFn(null, '新增')
    },
    handleEdit(row, flag) {
      if (flag == 'edit') {
        this.$refs.addHuiCeFenXiFlag.addUserFn(row, '编辑')
      } else if (flag == 'detail') {
        this.$refs.userDetailFlag.addUserFn(row, '详情')
      } else if (flag == 'disable') {
        let vm = this
        UsersUsersdisableEdit({id: row.id}).then(res => {
          if (res.code == 2000) {
            vm.$message.success(res.msg)
            vm.search()
          } else {
            vm.$message.warning(res.msg)
          }
        })
      } else if (flag == 'delete') {
        let vm = this
        vm.$confirm('您确定要删除选中的数据吗？', {
          closeOnClickModal: false
        }).then(res => {
          删除回测分析({id: row.id}).then(res => {
            if (res.code == 2000) {
              vm.$message.success(res.msg)
              vm.search()
            } else {
              vm.$message.warning(res.msg)
            }
          })
        }).catch(() => {

        })
      } else if (flag == "reset") {
        this.formInline = {
          page: 1,
          limit: 10
        }
        this.pageparm = {
          page: 1,
          limit: 10,
          total: 0
        }
        this.getData()
      }
    },
    /**
     * 从URL里下载文件
     */
    // 下载文件
    downloadFileURL(url) {
      var iframe = document.createElement("iframe")
      iframe.style.display = "none";
      iframe.src = url;
      document.body.appendChild(iframe);
    },
    importDataBackend() {
      var params = {
        page: 1,
        limit: 9999,
      }
      UsersUsersExportexecl(params).then(res => {
        if (res.code == 2000) {
          this.downloadFileURL(res.data.data)
          //this.$message.warning(res.data.data)
        }
      })
    },
    callFather(parm) {
      this.formInline.page = parm.page
      this.formInline.limit = parm.limit
      this.getData()
    },
    search() {
      this.formInline.page = 1
      this.formInline.limit = 10
      this.getData()
    },
    //获取列表
    async getData() {
      this.loadingPage = true
      回测分析列表(this.formInline).then(res => {
        this.loadingPage = false
        if (res.code == 2000) {
          this.tableData = res.data.data
          this.pageparm.page = res.data.page;
          this.pageparm.limit = res.data.limit;
          this.pageparm.total = res.data.total;
        }
      })
    },

    timeChange(val) {
      if (val) {
        this.formInline.beginAt = dateFormats(val[0], 'yyyy-MM-dd hh:mm:ss');
        this.formInline.endAt = dateFormats(val[1], 'yyyy-MM-dd hh:mm:ss');
      } else {
        this.formInline.beginAt = null
        this.formInline.endAt = null
      }
      this.search()
    },
    // 计算搜索栏的高度
    listenResize() {
      this.$nextTick(() => {
        this.getTheTableHeight()
      })
    },
    getTheTableHeight() {
      let tabSelectHeight = this.$refs.tableSelect ? this.$refs.tableSelect.offsetHeight : 0
      tabSelectHeight = this.isFull ? tabSelectHeight - 110 : tabSelectHeight
      this.tableHeight = getTableHeight(tabSelectHeight)
    },
    beforeUpload(file) {
      debugger;
      this.upload_file = file;
      return false;
    },
    /**
     * 提交表单
     */
    handleSubmit() {
      const {form: {validateFields}} = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          for (const key in values) {
            if (typeof (values[key]) === 'object') {
              values[key] = JSON.stringify(values[key])
            }
          }
          console.log('form', values);
          debugger;
          const formData = new FormData();
          formData.append('upload', this.upload_file);
          // Object.keys(values.upload).map(item => (
          //     formData.append(item, values.upload[item])
          // ));
          for (var v in values) {
            if (v != 'upload') {
              console.log(v + '+', values[v]);
              formData.append(v, values[v]);
            }
          }
          debugger;
          this.上传回测分析数据(formData).then((res) => {
            if (res.success) {
              this.$message.success('新增成功')
              this.confirmLoading = false
              this.$emit('ok', formData)
              this.handleCancel()
            } else {
              this.$message.error('新增失败：' + JSON.stringify(res.message))
            }
          }).finally((res) => {
            this.confirmLoading = false
          })
        } else {
          this.confirmLoading = false
        }
      })
    },
    async uploadRequest(param) {
      var vm = this
      let obj = await platformsettingsUploadPlatformImg(param)
      if (obj.code == 2000) {
        let res = ''
        if (obj.data.data[0].indexOf("://") >= 0) {
          res = obj.data.data[0]

        } else {
          res = url.split('/api')[0] + obj.data.data[0]
        }
        vm.imageurl = res
      } else {
        vm.$message.warning(res.msg)
      }
    },

  },
  created() {
    this.getData()
  },
  mounted() {
    // 监听页面宽度变化搜索框的高度
    window.addEventListener('resize', this.listenResize);
    this.$nextTick(() => {
      this.getTheTableHeight()
    })
  },

  unmounted() {
    // 页面销毁，去掉监听事件
    window.removeEventListener("resize", this.listenResize);
  },
}
</script>
